<template>
  <div class="admin-diy-admin">
    <div class="admin-pages-list" v-loading="!diyThemes">
      <theme-item @deleteTheme="deleteTheme" @makeTheme="makeTheme" @setDefault="setDefault" v-for="(theme,index) in diyThemes" :defautTheme="defaultTheme" :theme="theme" :key="index"></theme-item>
      <div class="no-data" v-if="nodata">暂无数据</div>
    </div>
    <delete-theme ref="zkRootDelete" @afterDelete="init"></delete-theme>
    <make-theme ref="zkRootMake" @afterMake="afterMake"></make-theme>
    <set-Default ref="zkRootSetDefault" @afterSetDefault="init"></set-Default>

  </div>
</template>

<script>
  import themeItem from './style/item'
  import deleteTheme from './style/delete'
  import makeTheme from './style/make'
  import setDefault from './style/set'

  import service from './style/service'
  import './var.scss'
  import ala from 'ala'
  export default {
    components: {
      themeItem,
      deleteTheme,
      setDefault,
      makeTheme
    },
    data () {
      return {
        defaultTheme: null,
        redirectUrl: null, // 跳转的url
        diyThemes: null // 远程模板
      }
    },
    props: {
      widget: {}
    },
    mounted () {
      this.init()
    },
    computed: {
      nodata () {
        if (this.diyThemes) {
          if (this.diyThemes.length > 0) {
            return false
          } else {
            return true
          }
        } else {
          return false
        }
      }
    },
    methods: {
      async init () {
        var para = {
          ...this.widget.value
        }
        para.filterType = para.themeType
        var response = await this.$ala.httpGet('api/theme/getDefaultTheme', para)
        if (response) {
          this.defaultTheme = response
        }
        var site = await this.$api.siteAsync()
        para.siteId = site.id
        response = await ala.diyHttpPost('api/DiyClient/GetAdminTheme', para)
        if (response) {
          this.diyThemes = response.result
        }
      },
      async makeTheme (theme) {
        this.$refs.zkRootMake.init(theme)
      },
      async deleteTheme (theme) {
        this.$refs.zkRootDelete.init(theme)
      },
      async setDefault (theme) {
        await this.$refs.zkRootSetDefault.init(theme, this.defaultTheme)
      },
      async afterMake (theme) {
        this.init()
        service.diy(this, theme)
      }
    }
  }
</script>
